<template>
  <div class="q-pa-md">
    {{ rowKey }}
    <t-toggle v-model="columnsFilter"></t-toggle>{{ columnsFilter }}
    <q-select v-model="selection" :options="selectOpts"></q-select>
    <q-btn @click="click">{{ cols }}</q-btn>

    <t-data-grid
      ref="dataGrid1"
      :selection="selection"
      title="Treats"
      :rows="rows"
      v-model:columnsFilter="columnsFilter"
      :optColumns="optColumns"
      v-model:selected="selected"
      :row-key="rowKey"
      :loading="loading"
      height="fill"
      v-model:pagination="pagination"
      @request="onRequest"
      @columnChanged="updateCols"
      :columnLinkFormat="columnLinkFormat"
    ></t-data-grid>
  </div>
</template>

<script>
  import options from './options';

  import { onMounted, ref } from 'vue';
  export default {
    setup() {
      const rows = ref([]);

      const pagination = ref({
        // sortBy: 'desc',
        // descending: false,
        page: 1,
        rowsPerPage: 3,
        rowsNumber: 2001,
      });

      const loading = ref(false);

      const selection = ref('none');

      function onRequest(props) {
        debugger;
        const { page, rowsPerPage, sortBy, descending } = props.pagination;
        const filter = props.filter;

        loading.value = true;

        setTimeout(() => {
          fetchFromServer(props.pagination, props.filter);
        }, 1500);
      }

      function fetchFromServer(_pagination, filter) {
        const { page, rowsPerPage, sortBy, descending, rowsNumber } =
          _pagination;
        const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage;

        // calculate starting row of data
        const startRow = (page - 1) * rowsPerPage;

        fetch(
          `http://localhost:3004/users?_start=${startRow}&_limit=${fetchCount}`,
        ).then(response => {
          response.json().then(movies => {
            // rows.value = movies;
            // clear out existing data and add new
            rows.value.splice(0, rows.value.length, ...movies);

            // don't forget to update local pagination object
            pagination.value.rowsNumber = 2001;
            pagination.value.page = page;
            pagination.value.rowsPerPage = rowsPerPage;
            pagination.value.sortBy = sortBy;
            pagination.value.descending = descending;

            loading.value = false;
          });
        });
      }

      // const dataGrid1 = ref();
      // const dataGrid2 = ref();
      let Widget = {};
      onMounted(() => {
        Widget.dataGrid1 = vm.dataGrid1.value;
        fetchFromServer(pagination.value, '');
      });
      const click = () => {
        debugger;
        console.log(
          vm.dataGrid1.value.columns.map(
            item => `${item.label}|${item.optCol.isShow}`,
          ),
        );
        console.log(
          vm.dataGrid1.value.columns
            .filter(item => item.optCol.isShow)
            .map(item => `${item.label}|${item.optCol.isShow}`),
        );
        vm.cols.value = vm.dataGrid1.value.columns
          .filter(item => item.optCol.isShow)
          .map(item => `${item.label}`);
      };
      const updateCols = () => {
        vm.cols.value = vm.dataGrid1.value.columns
          .filter(item => item.optCol.isShow)
          .map(item => `${item.label}`);
      };
      let vm = {
        columnLinkFormat: field => {
          debugger;
          console.log(field, Widget.dataGrid1.cellClickInfo.data[field]);
          // alert(Widget.dataGrid1.cellClickInfo.data[field]);
        },
        dataGrid1: ref(),
        pagination: pagination,
        selection: selection,
        selected: ref([]),
        rowKey: options.idField,
        columnsFilter: ref(true),
        selectOpts: ['none', 'multiple', 'single'],
        cols: ref(''),
        optColumns: options.columns,
        // ...useOpts({ optColumns: options.columns }).value, // columns,visibleColumns
        rows,
        loading,
        onRequest,
        click,
        updateCols,
      };
      return vm;
    },
  };
</script>
